<script setup name="login">
import { ref } from 'vue';
import { useStore } from 'vuex';
import { CODE_WAIT_TIME } from '@/constants';
import { throttle } from 'lodash';
import * as useApi from '@/api/user';

const store = useStore();

const mode = ref('account'); // 'account' | 'message'
const countDown = ref(CODE_WAIT_TIME);

const account = localStorage.getItem('account') || '';
const password = localStorage.getItem('password') || '';
const mobile = localStorage.getItem('mobile') || '';
const isMemo = localStorage.getItem('isMemo') === 'true' || true;

const params = ref({
  account: isMemo ? account : '',
  password: isMemo ? password : '',
  mobile: isMemo ? mobile : '',
  code: '',
  isMemo,
  isAgree: false,
});

async function onLoginWithAccount() {
  const res = await store.dispatch('user/login', params.value);
  if (res.success) {
    // 如果勾选了记住我 就记录相关数据
    if (params.value.isMemo) {
      localStorage.setItem('account', params.value.account);
      localStorage.setItem('password', params.value.password);
      localStorage.setItem('isMemo', params.value.isMemo);
    }
  } else {
    // 失败了清空密码
    params.value.password = '';
  }
}

// 验证码登录
async function onLoginWithCode() {
  console.log(1);
}

// 发送验证码
const sendCode = throttle(() => {
  useApi.loginWithCode(params.value.mobile)
    .then((msg) => {
      ElMessage({
        message: msg,
        type: 'success',
      });
    })
    .catch((msg) => {
      ElMessage({
        message: msg,
        type: 'error',
      });
    });
  countDown.value = CODE_WAIT_TIME - 1;
  const timer = setInterval(() => {
    countDown.value--;
    if (countDown.value < 1) {
      clearInterval(timer);
      countDown.value = CODE_WAIT_TIME;
    }
  }, 1000);
}, CODE_WAIT_TIME * 1000);

function useMessage() {
  mode.value = 'message';
}
function useAccount() {
  mode.value = 'account';
}
</script>

<template>
  <div class="container">
    <div class="form-wrapper">
      <el-form :model="params">
        <template v-if="mode === 'account'">
          <el-button @click="useMessage">
            使用短信登录
          </el-button>
          <el-form-item>
            <el-input v-model="params.account">
              <template #prepend>
                <i-ep-user class="icon" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="params.password" type="password">
              <template #prepend>
                <i-ep-lock class="icon" />
              </template>
            </el-input>
          </el-form-item>
        </template>
        <template v-else>
          <el-button @click="useAccount">
            使用账号登录
          </el-button>
          <el-form-item>
            <el-input v-model="params.mobile">
              <template #prepend>
                <i-ep-user class="icon" :size="24" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="params.code">
              <template #prepend>
                <icon name="dun-pai" :size="24 * .9" color="#fff" />
              </template>
              <template #append>
                <el-button @click="sendCode" :disabled="countDown !== CODE_WAIT_TIME">
                  {{ countDown === CODE_WAIT_TIME ? '发送验证码' : countDown }}
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </template>
        <el-form-item>
          <el-checkbox v-model="params.isMemo" label="记住我" />
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="params.isAgree">
            我已同意
            <a href="">《隐私条款》</a>
            和
            <a href="">《服务条款》</a>
          </el-checkbox>
        </el-form-item>
        <el-button type="primary" :disabled="!params.isAgree"
                   @click="mode === 'account' ? onLoginWithAccount : onLoginWithCode">
          登录
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

  .form-wrapper {
    width: 380px;
    outline: 1px solid red;

    :deep(.el-input-group__prepend) {
      background-color: #cfcdcd;
      padding: 8px;
    }

    .icon {
      font-size: 18px;
      color: white;
    }
  }
}
</style>
